<template>
	<view class="content">
		<view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
			<view class="cu-bar search bg-white fixed" :style="style">
				<view class="search-form round" :style="[{top:StatusBar + 'px'}]">
					<u-search placeholder="输入要查询的设备关键字" v-model="queryCondition.deviceName"
						@change="filterOilRecordsByDevice" @custom="selectMonth" action-text='月份'>

					</u-search>
				</view>


				<view class="cu-card case bg-white padding-bottom" :class="'no-card'">
					<view class="image fixed"
						style="background:url('/static/login/bjimg.png')no-repeat center center;height: 260upx;background-size: 100% 100%;">
						<view class="flex padding-top-xl justify-between">
							<view class="padding-sm margin-xsradius ">
								<view class="text-white text-center text-xl">
									累计柴油用量(升)：{{oilUseStatInfo.dieselOilTotal }}
								</view>
							</view>
						</view>
						<view class="flex justify-between">
							<view class="padding-sm margin-xsradius ">
								<view class="text-white text-center text-xl">
									累计汽油用量(升)：{{oilUseStatInfo.gasOnlineTotal }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="cu-bar bg-white solid-bottom" style="border-bottom: solid 1px #CCCCCC;">
					<view class="margin justify-left">
						<text class="text-grey text-bold">加油日期</text>
					</view>
					<view class="margin justify-left">
						<view class="text-grey text-bold"> 车辆/设备</view>
					</view>
					<view class="margin justify-end">
						<view class="text-grey text-bold" style="width: 140rpx;"> 加油量(升)</view>
					</view>
				</view>
			</view>

		</view>
		<view style="margin-top: 460rpx;"></view>


		<view v-for="(recordItem,index) in oilRecordList" :key="index">
			<view class="cu-bar bg-white solid-bottom"
				:style="(index%2==0?'background:#F0F0F0;':'background:#F5F5F5;')">
				<view class="action">
					<text class="text-center">
						<p>{{recordItem.recordTime.split(' ')[0]}}</p>
						<p>{{recordItem.recordTime.split(' ')[1]}}</p>
					</text>
				</view>
				<view class="margin justify-left">
					<view class="text-grey text-xs"
						:style="(recordItem.oilSubType.indexOf('2001')>-1?'color:#007AFF;':'color:blue;')">
						{{recordItem.deviceName}}
					</view>
				</view>
				<view class="margin justify-end">
					<view class="text-grey text-xs" style="width: 100rpx;">
						{{recordItem.oilValue}}
					</view>
				</view>
			</view>
		</view>

		<view class="selectPicker bg-white solid-top botton" v-if="visible">
			<view class="pickerBtn padding flex flex-wrap justify-between align-center">
				<button class="cu-btn bg-white" @click="()=>{this.visible=false;}">取消</button>
				<button class="cu-btn bg-yellow text-white " @click="okDate" :disabled="loadData">确定</button>
			</view>
			<picker-view :indicator-style="indicatorStyle" :value="value" @change="bindDateChange"
				@pickstart="(e)=>{this.loadData=true;}" @pickend="(e)=>{this.loadData=false;}" class="picker-view">
				<picker-view-column>
					<view class="text-center" style="line-height: 50px;" v-for="(item,index) in years" :key="index">
						{{item}}年
					</view>
				</picker-view-column>
				<picker-view-column>
					<view class="text-center" style="line-height: 50px;" v-for="(item,index) in months" :key="index">
						{{item}}月
					</view>
				</picker-view-column>
			</picker-view>
		</view>

		<view class="cu-tabbar-height"></view>
	</view>
</template>

<script>
	import {
		getBookList,
		deleteBook,
		oilRecordStat
	} from "../../api/book/book.js"

	import {
		currentUserInfo
	} from "../../api/index/index.js"
	export default {
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			for (let i = 1990; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			return {
				title: '加油记录本',
				modalName: null,
				listTouchStart: 0,
				listTouchDirection: null,
				startTouches: null, //开始滑动

				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				oilUseStatInfo: {
					dieselOilTotal: 0,
					gasOnlineTotal: 0
				},
				oilRecordList: [],
				loadData: false,
				currentMonth: "",
				years,
				year,
				months,
				month,
				days,
				day,
				value: [9999, month - 1, day - 1],
				visible: false,
				indicatorStyle: `height: 50px;`,
				queryCondition: {
					current: 1,
					size: 20,
					startTimeSeconds: null,
					endTimeSeconds: null,
					deviceName: null,
					orgId: currentUserInfo().dept_id
				}
			}
		},
		computed: {
			style() {
				var StatusBar = 30;
				var CustomBar = 210;
				var bgImage = this.bgImage;
				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;display:block;`;
				if (this.bgImage) {
					style = `${style}background-image:url(${bgImage});`;
				}
				return style
			}
		},
		created() {
			const curDate = new Date();
			this.buildConditionDate(curDate.getYear() + 1900, curDate.getMonth());
			this.getBookList();
			this.getOilRecordStat();
		},
		methods: {
			alertShow: function() {
				uni.showLoading({
					title: '加载中'
				});
			},
			selectMonth: function() {
				this.visible = true;
			},
			bindDateChange: function(e) {
				const val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				this.currentMonth = this.year + "年" + this.month + "月";
				console.log(this.currentMonth);
				this.buildConditionDate(this.year, this.month - 1);
			},
			okDate: function() {
				this.visible = false;
				this.getBookList();
				this.getOilRecordStat();
			},
			buildConditionDate: function(cyear, cmonth) {
				this.queryCondition.startTimeSeconds = new Date(cyear, cmonth).getTime();
				if (cmonth === 12) {
					this.queryCondition.endTimeSeconds = new Date(cyear + 1, 1, 1).getTime();
				} else {
					this.queryCondition.endTimeSeconds = new Date(cyear, cmonth + 1, 1).getTime();
				}
			},
			filterOilRecordsByDevice: function() {
				this.getBookList();
			},
			Delete: function(index) {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确定要删除吗',
					success: function(res) {
						if (res.confirm) {
							deleteBook({
								id: index
							}, (res) => {
								uni.showToast({
									title: '删除成功',
									duration: 2000,
									icon: 'none'
								});
								that.getBookList();
							}, )
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});

			},
			getBookList: function() {
				var that = this;
				getBookList(this.queryCondition, res => {
					const resJsonObj = JSON.parse(res);
					if (resJsonObj.success === true) {
						that.oilRecordList = resJsonObj.data.records;
					} else {
						uni.showToast({
							title: '请求失败:' + resJsonObj.msg,
							duration: 1000,
							icon: 'error'
						});
					}
				});
			},
			getOilRecordStat() {
				let that = this;
				oilRecordStat(this.queryCondition, (res) => {
					const resJson = JSON.parse(res).data;
					that.oilUseStatInfo.dieselOilTotal = resJson.DIESEL_OIL;
					that.oilUseStatInfo.gasOnlineTotal = resJson.GASOLINE;
					console.log(that.oilUseStatInfo);
				});
			}
		}
	}
</script>

<style scoped>
	.backgroundimage {
		width: 100%;
		height: auto;
	}

	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}

	.selectPicker {
		position: fixed;
		bottom: var(--window-bottom);
		width: 100%;
	}
</style>
